<template>
  <div class="set">
    系统设置
    <div class="article-header"></div>

    <a-table
      :columns="columns"
      :data-source="dataSource"
      @change="handleTableChange"
      :pagination="pagination"
      :rowKey="(dataSource) => dataSource.systemId"
    >
      <template slot="time" slot-scope="scope">
        <div class="table-title">
          {{ scope.createTime }}
        </div>
      </template>

      <template slot="operation" slot-scope="scope">
        <div class="table-display">
          <div class="display-list" @click="compileMet(0, scope)">编辑</div>
          <div class="display-list" @click="compileMet(1, scope)">删除</div>
        </div>
      </template>
    </a-table>

    <!--新增-->
    <div class="add" ref="add">
      <a-modal
        :getContainer="() => $refs.add"
        v-model="addVisible"
        :title="addIndex == 0 ? '新增' : '编辑'"
        width="50%"
      >
        <div class="add-block">
          <div class="list">
            <div class="left">电话：</div>
            <a-input v-model="form.phone" clearable />
          </div>

          <div class="list">
            <div class="left">邮箱：</div>
            <a-input v-model="form.email" clearable />
          </div>
        </div>

        <div class="block-display">
          <div
            class="block-display-list"
            v-for="(item, index) in 2"
            :key="index"
            @click="buttonMet(index)"
          >
            {{ index == 0 ? "取消" : "确定" }}
          </div>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { systemGet, systemPost, systemDelete } from "../../api/common";
export default {
  data() {
    return {
      addVisible: false,
      addIndex: 0,
      columns: [
        {
          title: "电话",
          dataIndex: "key",
          key: "key",
        },
        {
          title: "邮箱",
          dataIndex: "value",
          key: "value",
        },
        {
          title: "时间",
          scopedSlots: { customRender: "time" },
          width: 250,
        },
        {
          title: "操作",
          scopedSlots: { customRender: "operation" },
          width: 200,
        },
      ],
      dataSource: [],
      page: 1,
      limit: 10,
      form: {
        id: "",
        phone: "",
        email: "",
      },

      pagination: {
        total: 10,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "50", "100"],
        showTotal: (total) => `总共 ${total} 条`,
      },
    };
  },
  created() {
    this.systemGetMet();
  },
  methods: {
    systemGetMet() {
      let params = {};

      systemGet(params).then((res) => {
        if (res.errorCode == null) {
          this.dataSource = res.resultData;
        }
      });
    },
    compileMet(index, item) {
      if (index == 0) {
        this.addIndex = 1;

        this.form.phone = "";
        this.form.email = "";
        this.essayDetailGetMet(item);
      } else if (index == 1) {
        this.deleteMet(item.systemId);
      } else {
      }
    },
    //弹出框 确认
    buttonMet(index) {
      if (index == 0) {
        this.addIndex = 0;
        this.form.id = "";
        this.form.phone = '';
        this.form.email = "";
        this.addVisible = false;
      } else {
        this.essayPostMet(0);
      }
    },

    // 详情
    essayDetailGetMet(item) {
      this.form.id = item.systemId;
      this.form.phone = item.key;
      this.form.email = item.value;

      this.addVisible = true;
    },
    // 点击确定
    essayPostMet() {
      let params = {
        systemId: this.form.id,
        key: this.form.phone,
        value: this.form.email,
      };

      systemPost(params).then((res) => {
        this.$message.success(
          `${this.addIndex == 0 ? "新增成功！" : "编辑成功！"}`
        );
        this.addVisible = false;
        this.systemGetMet();
      });
    },

    // 删除
    deleteMet(id) {
      const params = id;

      systemDelete(params).then((res) => {
        if (res.resultStatus === true) {
          this.$message.success("删除成功");
          this.systemGetMet();
        }
      });
    },

    //----------------------
    handleTableChange(pagination) {
      this.page = pagination.current;
      this.limit = pagination.pageSize;

      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.systemGetMet();
    },
  },
};
</script>

<style lang="less" scoped>
.set {
  .article-header {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .header {
      width: 100px;
      height: 35px;
      border: 1px solid;
      margin-right: 35px;
      cursor: pointer;
      background: #775dc0;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-weight: 500;
      font-size: 14px;
    }
  }

  .table-title {
    cursor: pointer;
  }

  .table-display {
    display: flex;

    .display-list {
      margin-right: 30px;
      cursor: pointer;
    }
  }

  .add {
    /deep/ .ant-modal-title {
      text-align: center;
      font-weight: bold;
      font-size: 15px;
      color: #fff;
    }

    /deep/ .ant-modal-header {
      padding: 0;
      height: 40px;
      background: #a6a6a6;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /deep/ .ant-modal-close-x {
      width: 40px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      margin-right: 10px;
      color: #fff;
    }

    /deep/ .ant-modal-body {
      background: #fff;
    }

    /deep/ .ant-modal-footer {
      display: none;
    }

    .add-block {
      margin: 0 auto;
      height: 100%;

      .list {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        height: 35px;

        /deep/ .ant-calendar-picker {
          width: 100%;
        }

        /deep/ .ant-input {
          width: 91%;
          height: 100%;
        }

        /deep/ .el-upload {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .left {
          width: 50px;
          height: 100%;
          text-align: right;
          display: flex;
          align-items: center;
        }

        // .input {
        //   width: 76%;
        // }
        .right {
          padding: 0 10px;
          box-sizing: border-box;
          border: 1px solid #ccc;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 12px;
          border-radius: 4px;
          font-size: 12px;
          cursor: pointer;
          width: 100px;
        }

        .right:hover {
          background: #775dc0;
          color: #fff;
        }
      }
    }

    .block-display {
      display: flex;
      justify-content: space-around;
      margin-top: 40px;

      .block-display-list {
        width: 100px;
        height: 35px;
        border: 1px solid;
        margin-right: 25px;
        cursor: pointer;
        background: #775dc0;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-weight: 500;
        font-size: 14px;
      }

      .block-display-list:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
